<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="shortcut icon" href="#" />
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .head{
        width: 100%;
        height: 80px;
        background-color: black;
        /* font-family: "Tulpen One", cursive */
        overflow: hidden;

    }
    .logo{
        margin-left: 200px;
        float: left;
    }
    .bgc{
        width: 100%;
        height: 800px;
        background: url(http://demo.mxyhn.xyz:8020/cssthemes4/cpts_784_bgx/images/banner.jpg);
        float: left;
    }
    .zi{
        color: rgb(255, 255, 255);
        font-family: "Alex Brush", cursive;
        font-size: 48px;
        font-weight: 600;
        line-height: 52.8px;
        text-align: center;
        text-transform: capitalize;
        margin-top: 70px;

    }
    .zi1{
        color: white;
        font-size: 25px;
        font-weight: bold;
        font-family: "Alex Brush", cursive;
        position: absolute;
        left: 480px;
        top: 220px;
    }
    .zi:hover{
        color: brown;
    }
    .zi1:hover{
        color: gold;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }
    .head-right{
        width: 550px;
        height: 80px;
        float: left;
        margin-left: 180px;
    }
    li:hover{
        color: yellow;
    }
    ul li{
        float: left;
        list-style: none;
        line-height: 80px;
        font-size: 19px;
        font-weight: bold;
        color: lightgoldenrodyellow;
        margin-left: 30px;
    }
    .aaa{
        width: 460px;
        height: 80px;
        float: right;

    }
</style>
<body>

<div id="app">
    <div class="head">
        <div class="logo">
            <img style="width: 120px; height: 80px;" src="https://img1.baidu.com/it/u=3420146899,3704747514&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=418" >
        </div>

        <div class="head-right">
            <ul>
                <li>主页</li>
                <li>主食</li>
                <li>菜类</li>
                <li>汤类</li>
                <li>小吃类</li>
                <li>饮料</li>
            </ul>
        </div>
        <el-link type="warning" disabled style="position: absolute;left: 1060px;top: 20px;height: 40px;line-height: 40px;"><h3>欢迎您：{{user.nickname}}</h3></el-link>
        <div class="aaa">
            <el-button type="info" plain style="position: absolute;left: 1230px;top: 20px;">我的订单</el-button>
            <el-button type="primary" plain  style="position: absolute;left: 1360px;top: 20px;">退出登录</el-button>
        </div>

    </div>



    <div class="bgc">
        <h1 class="zi" data-wow-duration="1000ms" data-wow-delay="300ms">Sed ut perspiciatis unde omnis iste natus</span></h1>
        <span class="zi1">Excepteur sint occaecat cupidatat non proident</span>

        <div class="lbt" style="margin-left: 120px;margin-top: 80px;float: left;">
            <template>
                <el-carousel :interval="1500" indicator-position="none" arrow="always" style="width: 300px;height: 300px;border-radius: 100%; border: 6px white solid;">
                    <el-carousel-item v-for="item in sreenList" :key="item">
                        <img :src="item" style="width: 300px;height: 300px;border-radius: 100%;">
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
        <div class="lbt1" style="margin-left: 120px;margin-top: 80px;float: left;">
            <template>
                <el-carousel :interval="1500" indicator-position="none" arrow="always" style="width: 300px;height: 300px;border-radius: 100%; border: 6px white solid;">
                    <el-carousel-item v-for="item in sreenList1" :key="item">
                        <img :src="item" style="width: 300px;height: 300px;border-radius: 100%;">
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
        <div class="lbt2" style="margin-left: 120px;margin-top: 80px;float: left;">
            <template>
                <el-carousel :interval="1500" indicator-position="none" arrow="always" style="width: 300px;height: 300px;border-radius: 100%; border: 6px white solid;">
                    <el-carousel-item v-for="item in sreenList2" :key="item">
                        <img :src="item" style="width: 300px;height: 300px;border-radius: 100%;">
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>

    </div>

</div>

<script>
    var url = location.search;
    var id = url.split("=")[1];
    var haha = new Vue({
        el:"#app",
        data:{
            user:{},
            sreenList:[
                'https://img0.baidu.com/it/u=1425260383,2384289127&fm=253&fmt=auto&app=138&f=JPEG?',
                'https://img0.baidu.com/it/u=2668970605,2895910255&fm=253&fmt=auto&app=138&f=JPEG?',
                'https://img2.baidu.com/it/u=1812806856,2915198228&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=333'
            ],
            sreenList1:[
                'https://img1.baidu.com/it/u=595730206,3484875219&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=439',
                'https://img0.baidu.com/it/u=4224404811,20866190&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                'https://img1.baidu.com/it/u=3127238039,2665158565&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'
            ],
            sreenList2:[
                'https://img2.baidu.com/it/u=1903742828,1283454301&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                'https://img0.baidu.com/it/u=2285367186,932075921&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=353',
                'https://img0.baidu.com/it/u=1035090109,1161716915&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'
            ],
        },
        methods:{

        }
    });
    $.get("/aaa/admin/getName?id="+id,function (backData) {
        haha.user = backData.data;
    })


</script>
</body>
</html>